<template>
  <div>
    <!-- 面包屑导航区域 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item :to="{path:'/schedulingmananger'}">医生排班管理</el-breadcrumb-item>
      <el-breadcrumb-item>新增排班规则</el-breadcrumb-item>
    </el-breadcrumb>
    <el-card>
      <el-form>
        <el-form-item label="科室名称">
          <el-select v-model="queryInfo.deptId" placeholder="请选择">
            <el-option
              v-for="item in deptList"
              :key="item.id"
              :label="item.deptname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="挂号级别">
          <el-select v-model="queryInfo.registleveId" placeholder="请选择">
            <el-option
              v-for="item in registleveList"
              :key="item.id"
              :label="item.registname"
              :value="item.id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-button type="primary" @click="getDataList">查询</el-button>
      </el-form>

      <!-- 表格区域 -->
      <el-table :data="dataList" border stripe>
         <el-table-column label="选择" prop="id">
          <template slot-scope="select">
            <el-checkbox @change="checked=>checkboxSelect(checked,select.row.id)"></el-checkbox>
          </template>
        </el-table-column>
        <el-table-column label="医生名称" prop="user.realname"></el-table-column>
         <el-table-column v-for="(item, index) in dayList" :key="index" :label="item" width="100">
         <template slot-scope="select">
            <el-checkbox true-label="1" false-label="0" v-model="weeklist[select.row.id][index]" @change="checked=>checkboxChange(checked,select.row.id)"></el-checkbox>
          </template>
         </el-table-column>
      </el-table>

      <!-- 分页区域 -->
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="queryInfo.pageNum"
        :page-sizes="[1, 2, 5, 10]"
        :page-size="queryInfo.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
      ></el-pagination>
         <el-form>
          <el-form-item label="规则名称">
          <el-input v-model="saveFrom.ruleName"></el-input>
        </el-form-item>
        <el-button type="primary" @click="addButtonClick">添加</el-button>
        </el-form>
    </el-card>
  </div>
</template>
<script>
export default {
  data() {
    return {
      queryInfo: {
        deptId: "",
        registleveId: "",
        pageNum: 1,
        pageSize: 5
      },
      total: 0,
      dataList: [],
      deptList: [],
      registleveList: [],
      dayList:[
        "星期一(上午)","星期一(下午)",
        "星期二(上午)","星期二(下午)",
        "星期三(上午)","星期三(下午)",
        "星期四(上午)","星期四(下午)",
        "星期五(上午)","星期五(下午)",
        "星期六(上午)","星期六(下午)",
        "星期日(上午)","星期日(下午)",
        ],
      weeklist: [],
      saveFrom:{
        ruleName:"",
        rules:[]
      },
      addRuleIds:[]
    };
  },
  created() {
    this.getRegistleveList();
    this.getDeptList();
    this.getDataList();
  },
  methods: {
    async getDataList() {
      const { data: res } = await this.$http.get("rule/finRuleByPage", {
        params: this.queryInfo
      });
      if (res.meta.status !== 200) {
        return this.$message.error(res.meta.msg);
      }
      this.dataList = res.rules;
      this.total = res.totalpage;
      //将字符串拆成数组
      this.dataList.forEach(value => {
      this.weeklist[value.id] = value.week.split("");
      });
    },
    async getDeptList() {
      const { data: res } = await this.$http.get("department/findDepartment");
      this.deptList = res;
    },
    async getRegistleveList() {
      const { data: res } = await this.$http.get("/registe/findregistelevel");
      this.registleveList = res;
    },
    async addButtonClick(){
       const confirmResult = await this.$confirm(
        "是否添加该条规则？",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        }
      ).catch(err => err);
      // 如果用户确认删除，则返回值为字符串 confirm
      // 如果用户取消了删除，则返回值为字符串 cancel
      // console.log(confirmResult)
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消添加");
      }
      this.saveFrom.rules=[]
      this.addRuleIds.forEach(id => {
        this.dataList.forEach(data=>{
          if(data.id==id){
            this.saveFrom.rules.push(data)
          }
        })
      });
      const { data: res } = await this.$http.post("rule/addRules",this.saveFrom);
      if (res.meta.status !== 200) {
        return this.$message.error("添加规则失败！");
      }
      this.$message.success(res.meta.msg);
      this.getDataList();
    },
    // 监听 pagesize 改变的事件
    handleSizeChange(newSize) {
      this.queryInfo.pageSize = newSize;
      this.getDataList();
    },
    // 监听 页码值 改变的事件
    handleCurrentChange(newPage) {
      this.queryInfo.pageNum = newPage;
      this.getDataList();
    },
   checkboxChange(checked, row) {
       let temp = this.weeklist[row]
       let merge = ''
      //v-model通过对象中的get set方法更新view,数组中没有get set方法 所以通过这种方式手动更新view
      this.$set(this.weeklist,row,temp)//要赋值的对象，index ，value
      //将数组拼成字符串
      temp.forEach(value => {
        merge+=value
      })
      //应用到datalist中
      this.dataList.forEach(value => {
        if(value.id == row){
           value.week = merge
        }
      });
    },
    checkboxSelect(checked, row){
        if (checked) {
        //如果被选中把id添加到删除列表中
        this.addRuleIds.push(row);   
       }else {
        //否则从列表中移除
        for (let index = 0; index <this.addRuleIds.length; index++) {
          if(this.addRuleIds[index]==row)
            this.addRuleIds.splice(index);
        }
      }
    }
  },
};
</script>